import React, { useState, useEffect } from 'react'
import Mobile from './components/mobile'
import { connect } from 'umi'
import { SketchPicker } from 'react-color';
import { Row, Col, Collapse, Checkbox, Space, Popover, Button, Input, Select } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import UploadImage from '@/components/UploadImage';
import { backgroundObj } from '@/utils/utils'
import { DragHandle } from '@/components/TableDataBlock/SortBlock'
import FixButton from '@/components/FlxButton'
const { Panel } = Collapse;
const wechatNative = (props) => {
    const { dispatch } = props
    const [showKeData, setShowKeyData] = useState(
        [
            { key: '1', label: '首页', linkPath: 'home', defaultIcon: '', selectIcon: '', deleteFlag: false },
            { key: '2', label: '商品', linkPath: 'shop', defaultIcon: '', selectIcon: '', deleteFlag: true },
            { key: '3', label: '我的', linkPath: 'me', defaultIcon: '', selectIcon: '', deleteFlag: false }
        ]
    )
    const [color, setColor] = useState('rgb(16, 92, 251)')
    const [data, setData] = useState({})
    const { id } = data
    const navigationProps = {
        label: '', linkPath: '', defaultIcon: '', selectIcon: '', deleteFlag: true
    }
    useEffect(() => {
        fetchData()
    }, [])
    const fetchData = () => {
        dispatch({
            type: 'wechatPage/fetchPageConfigDetail',
            payload: {
                pageType: "navigation"
            },
            callback: (e = {}) => {
                const { id, pageConfig = '{}' } = e
                if (id) {
                    const config = JSON.parse(pageConfig)
                    const { list, color } = config
                    setShowKeyData(list)
                    setColor(color)
                    setData(e)
                }
            }
        })
    }
    const submit = () => {
        dispatch({
            type: 'wechatPage/fakeSavePageConfig',
            payload: {
                id,
                pageType: 'navigation',
                pageConfig: JSON.stringify({
                    color: color,
                    list: showKeData
                })
            },
            callback: (e) => {
                fetchData()
            }
        })
    }
    const [sortType, setSortType] = useState(true)

    const [visible, setVisible] = useState(false)
    const handleValue = ({ data, index }) => {
        setShowKeyData(showKeData.map((val, o) => {
            if (o === index) {
                return {
                    ...val,
                    ...data
                }
            }
            return val
        }))
    }
    const getColumns = [
        {
            title: '排序',
            dataIndex: 'key',
            render: (e, record, index) => {
                return <DragHandle></DragHandle>
            }
        },
        {
            title: '导航名称',
            dataIndex: 'label',
            render: (e, record, index) => {
                const { deleteFlag } = record
                if (deleteFlag) {
                    return <Input onFocus={() => { setSortType(false) }} onBlur={() => { setSortType(true) }} onChange={(e) => {
                        handleValue({
                            index,
                            data: { label: e.target.value }
                        })
                    }} value={e}></Input>
                }
                return e
            }
        },
        {
            title: '跳转链接',
            dataIndex: 'linkPath',
            render: (e, record, index) => {
                const { deleteFlag } = record
                return <Select disabled={!deleteFlag} value={e} style={{ width: '100%' }} onChange={(e) => {
                    handleValue({
                        index,
                        data: { linkPath: e }
                    })
                }} options={[{ label: '我的', value: 'me', disabled: true }, { label: '商品', value: 'shop' }, { label: '首页', value: 'home', disabled: true }]}></Select>
            }
        },
        {
            title: '默认图标',
            dataIndex: 'defaultIcon',
            render: (e, record, index) => {
                return <div style={{ color: '#888' }}>
                    <div style={{ width: 40, margin: '0 auto', height: 40, fontSize: 28, ...backgroundObj(e) }}></div>
                    <Button onClick={() => {
                        setVisible({
                            show: true,
                            onChange: (src, index) => {
                                handleValue({
                                    index,
                                    data: {
                                        defaultIcon: src
                                    }
                                })
                            },
                            index
                        })
                    }} type='link'>
                        设置
                    </Button>
                </div>
            }
        },
        {
            title: '选中图标',
            dataIndex: 'selectIcon',
            render: (e, record, index) => {
                return <div style={{ color: color }}>
                    <div style={{ width: 40, height: 40, margin: '0 auto', fontSize: 28, ...backgroundObj(e) }}></div>
                    <Button onClick={() => {
                        setVisible({
                            show: true,
                            onChange: (src, index) => {
                                handleValue({
                                    index,
                                    data: {
                                        selectIcon: src
                                    }
                                })
                            },
                            index
                        })
                    }} type='link'>
                        设置
                    </Button>
                </div>
            }
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record, index) => [
                {
                    title: '删除',
                    visible: record.deleteFlag,
                    click: () => {
                        setShowKeyData(showKeData.filter((val, o) => {
                            return o !== index
                        }))
                    },
                },
            ],
        },
    ];
    return <div style={{ display: 'flex' }}>
        <Mobile color={color} data={showKeData}></Mobile>
        <Row style={{ marginLeft: 24, flex: '1' }} gutter={[24, 24]}>
            <Col span={24}>
                <Space>
                    <div className='editor-content-item-label'> 导航文字选中状态颜色： </div>
                    <Button onClick={() => {
                        setColor('rgb(16, 92, 251)')
                    }} type='link'>重置</Button>
                    <Popover content={<SketchPicker
                        color={color}
                        onChange={(e) => {
                            setColor(e.hex)

                        }}></SketchPicker>} trigger={['click']} placement={'bottom'}>
                        <div className='design-color-set'>

                            <div style={{ background: color }} className='design-color-block '></div>
                        </div>
                    </Popover>

                </Space>
            </Col>
            <Col span={24}>
                <TableDataBlock
                    tableSort={sortType ? {
                        key: 'key',
                        onSortEnd: (e) => {
                            setShowKeyData(e)
                        }
                    } : null}
                    pagination={false}
                    columns={getColumns}
                    rowKey={(record, index) => `${record.key}`}
                    list={showKeData}
                ></TableDataBlock>
            </Col>
            <Col span={24}>
                <Button onClick={() => {
                    setShowKeyData([
                        ...showKeData,
                        {
                            ...navigationProps,
                            key: showKeData.length + 1
                        }
                    ])
                }} type="dashed">
                    +添加导航
                </Button>
            </Col>
        </Row>
        <UploadImage handleImage={(e) => {
            const { index, onChange } = visible
            if (e) {
                const { src } = e
                onChange(src, index)
            }
        }} visible={visible} onClose={() => { setVisible(false) }}></UploadImage>
        <FixButton onOk={submit}></FixButton>
    </div>
}
export default connect(({ loading }) => ({
    loading: loading,
}))(wechatNative);
